<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年08月16日 12:21
 * @Copyright:  2022-2023
!-->
<template>
  <div>
    <!-- 书写评论 -->
    <div v-if="article.commentOpen == '1'" class="comment-close-info">
      本博文评论功能已关闭
    </div>
    <div v-else class="comment-write-container">
      <div class="comment-header">
        <img :src="![null, '', undefined].includes(token)? user.avatar : defaultAvatar" class="header-img" alt="">
      </div>
      <div class="comment-content">
        <div @blur="commentContentBlur"
             @click="hideEmojiPanel"
             @focus="commentContentFocus">
          <mavon-editor
            ref="md"
            v-model="content"
            :html="false"
            :ishljs="true"
            @imgAdd="uploadImage"
            @imageFilter="imageFilter"
            placeholder="请发表有价值的评论，不发布灌水内容，支持markdown语法"
            :toolbars="editorToolbars"
            :subfield="false"
            fontSize="16px"
            :xss-options="false"
            :autofocus="false"
            @imgDel="deleteImage"
          />
        </div>
        <div class="comment-button">
          <div class="emoji-panel-btn" @click="hideOrShowEmojiPanel">
            <img src="@/assets/images/face_logo.png" alt="">
          </div>
          <div class="content-count">还能输入{{ commentContentLength }}个字符</div>
          <el-button type="primary" size="small" @click="saveComment">评论</el-button>
          <emoji-panel v-if="dvShowEmojiPanel" class="emojiPanel" @emojiClick="appendEmoji" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import EmojiPanel from "@/components/emojipanel/emoji-panel.vue";
import { insertCommentByBatch } from "@/api/blog/comment";
import store from "@/store";
import { delFile, uploadFile } from "@/api/file/file";

@Component({
  components: { EmojiPanel }
})
export default class index extends Vue {

  /** 文章信息 */
  @Prop()
  private article:any;

  /** 评论对象信息 {commentId: xxx, userId: xxx} */
  @Prop()
  private toCommentInfo: any;

  /** 当前登录用户信息 */
  get user() {
    return store.getters.userInfo;
  }

  /** 评论内容 */
  private content:string = '';

  /** 显示评论内容还能输入的字符数量 */
  public  commentContentLength:any = 300;

  /** 控制评论框表情面板显示 */
  private dvShowEmojiPanel:any = false;

  /** 评论内容文本域行数  */
  public commentAreaRow:any = 1;

  /** token */
  get token() {
    return store.getters.token;
  }

  /** 默认头像 */
  public defaultAvatar:any = this.$SysConf.defaultAvatar;

  /** 文件上传路径 */
  private filePath: any = '/blog/comment';

  /** 上传的文件数据 */
  private fileList: any = [];

  /** 编辑器顶部导航栏 */
  public editorToolbars:any = {
    bold: true, // 粗体
    italic: true, // 斜体
    trash: true, // 清空
    code: true, // code
    imagelink: true, // 图片链接
    subfield: false, // 单双栏模式
    preview: true, // 预览
    help: true // 帮助
  };

  /** 发表评论 */
  private saveComment() {
    const data = {
      userId: this.user.id,
      content: this.content,
      toBlogId: this.article.id,
      toCommentId: this.toCommentInfo.commentId,
      toUserId: this.toCommentInfo.userId
    }
    const dataArr = [];
    dataArr.push(data);
    insertCommentByBatch(dataArr).then((res: any) => {
      this.$modal.msgSuccess(res.msg);
      this.$emit('refreshCommentList');
      this.$emit('cancelBox');
      this.content = '';
    })
  }

  /** 图片上传 */
  private uploadImage(pos: any, file: any) {
    const ref: any = this.$refs.md;
    if (this.beforeImageUpload(file)) {
      uploadFile(this.filePath, file, file.name).then((res: any) => {
        ref.$img2Url(pos, res.data.url);
        const fileData = {
          fileId: res.data.fileId,
          url: res.data.url
        }
        this.fileList.push(fileData);
      });
    } else {
      ref.$img2Url(pos, '');
    }
  }

  /** 图片删除 */
  private deleteImage(arr: any) {
    for (const item of  this.fileList) {
      const fileData: any = item;
      if (fileData['url'] === arr[0]) {
        delFile(fileData.fileId).then(() => {
          this.$modal.msgSuccess('图片删除成功');
        })
      }
    }

  }

  /** 图片上传前的校验 */
  private beforeImageUpload(file: any): boolean {
    const isJPEG = file.name.split('.')[1] === 'jpeg'
    const isJPG = file.name.split('.')[1] === 'jpg'
    const isPNG = file.name.split('.')[1] === 'png'
    const isBMP = file.name.split('.')[1] === 'bmp'
    const isGIF = file.name.split('.')[1] === 'gif'
    const isLt1000K = file.size  < 300 * 1024
    if (!isJPG && !isJPEG && !isPNG && !isBMP && !isGIF) {
      this.$message.error('上传图片只能是 JPEG/JPG/PNG/BMP/GIF 格式!')
      return false
    }
    if (!isLt1000K) {
      this.$message.error('单张图片大小不能超过 300KB!')
      return false
    }
    return (isJPEG || isJPG || isPNG || isBMP || isGIF) && isLt1000K
  }

  /** 图片过滤,过滤掉不合法的图片 */
  private imageFilter() {

  }

  /** 往输入框中添加表情 */
  private appendEmoji(text: string) {
    // 添加表情
    this.commentAreaRow = 3;
    this.content = this.content + text;
    this.dvShowEmojiPanel = false;
  }

  /** 鼠标离开论框 */
  private commentContentBlur() {
    if (this.content.length === 0) {
      this.commentAreaRow = 1
    }
  }

  /** 鼠标放到评论框上 */
  private commentContentFocus() {
    this.commentAreaRow = 3
    // 隐藏表情面板
    this.hideEmojiPanel();
  }

  /** 显示或隐藏表情面板 */
  private hideOrShowEmojiPanel() {
    this.dvShowEmojiPanel = !this.dvShowEmojiPanel;
  };

  /** 隐藏表情面板 */
  private hideEmojiPanel() {
    this.dvShowEmojiPanel = false;
  }

}
</script>
<style scoped lang="scss">
.comment-close-info {
  text-align: center;
}
.comment-write-container{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-bottom: 20px;
  width:100%;
  .comment-header {
    position:relative;
    display: inline-block;
    height:0;
    padding-top: 5%; /*padding-bottom都可以*/
    margin-right: 10px;
    width: 5%;
    .header-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .comment-content {
    display: flex;
    width: 93%;
    flex-direction: column;
    justify-content: flex-start;
    border: 1px solid #d9d9d9;
    transition: all 0.3s;
    .comment-button {
      position: relative;
      margin-top: 3px;
      margin-right: 3px;
      margin-bottom: 3px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .content-count{
        margin-right: 15px;
      }
    }
    .v-note-wrapper {
      min-height: 200px !important;
      min-width: unset !important;
      display: block !important;
      position: static !important;
    }
  }
  .comment-content:focus-within{
    border-color: #40a9ff;
    box-shadow: 0 0 2px 2px #40a9ff33;
  }
  .comment-content >>> .el-input {
    border: none !important;
    border-radius: 20px;
    box-shadow: none !important;
  }
  .comment-content >>> .v-left-item {
    max-width: 70%;
  }
  .comment-content >>> .v-right-item {
    max-width: 30%;
  }
}
</style>
<style>
.emoji-panel-wrap {
  box-sizing: border-box;
  border: 1px solid #cccccc;
  background-color: #ffffff;
  width: 100%;
  height: 150px;
  position: absolute;
  z-index: 99;
  overflow-y: scroll;
  top: 40px;
  font-size: 16px;
}
.emoji-size-small {
  zoom: 0.3;
  margin: 5px;
  vertical-align: middle;
  font-size: 40px;
}
.emoji-size-large {
  /* emojipanel表情大小 */
  zoom: 0.5;
  margin: 5px;
  font-size: 45px;
}
.emoji-panel-btn img{
  margin-left: 5px;
  height: 25px;
  width: 25px;
}
.emoji-panel-btn:hover {
  cursor: pointer;
  opacity: 0.8;
}
.emoji-item-common {
  display: inline-block;
}
.emoji-item-common:hover {
  cursor: pointer;
}
</style>

